<template>
  <div class="wrap">
    <!-- <div class="dialog-box">
      <img src="../../assets/images/lottery/dialog.png" class="images" />
    </div> -->
    <div class="header"></div>
    <div class="main">
      <div class="title-image">
        <img src="../../assets/images/lottery/title1.png" class="images" />
      </div>
      <div class="one-prize">
        <div class="bannerTops">
          <img src="../../assets/images/lottery/huapro.png" class="images" />
        </div>
        <div class="text-title">
          <div class="line-left"></div>
          <div class="name">中奖名单</div>
          <div class="line-right"></div>
        </div>
        <div class="phone">
          恭喜 {{ phone.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
        </div>
      </div>
      <div class="two-prize">
        <div class="left">
          <div class="text-title">
            <div class="line-left"></div>
            <div class="name">中奖名单</div>
            <div class="line-right"></div>
          </div>
          <div class="nameList">
            <vue-seamless-scroll
              :data="twoPrize"
              :class-option="defaultOption"
              class="Box"
            >
              <ul class="ul-scoll">
                <li v-for="(item, index) in twoPrize" :key="index">
                  恭喜 {{ item.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/images/lottery/jiuyang.png" class="images" />
        </div>
      </div>
      <div class="three-prize">
        <div class="right">
          <img src="../../assets/images/lottery/zhaguo.png" class="images" />
        </div>
        <div class="left">
          <div class="text-title">
            <div class="line-left"></div>
            <div class="name">中奖名单</div>
            <div class="line-right"></div>
          </div>
          <div class="nameList">
            <vue-seamless-scroll
              :data="threePrize"
              :class-option="defaultOption"
              class="Box"
            >
              <ul class="ul-scoll">
                <li v-for="(item, index) in threePrize" :key="index">
                  恭喜 {{ item.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="four-prize">
        <div class="left">
          <div class="text-title">
            <div class="line-left"></div>
            <div class="name">中奖名单</div>
            <div class="line-right"></div>
          </div>
          <div class="nameList">
            <vue-seamless-scroll
              :data="fourPrize"
              :class-option="defaultOption"
              class="Box"
            >
              <ul class="ul-scoll">
                <li v-for="(item, index) in fourPrize" :key="index">
                  恭喜 {{ item.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/images/lottery/xicheng.png" class="images" />
        </div>
      </div>
      <div class="five-prize">
        <div class="right">
          <img src="../../assets/images/lottery/dainbing.png" class="images" />
        </div>
        <div class="left">
          <div class="text-title">
            <div class="line-left"></div>
            <div class="name">中奖名单</div>
            <div class="line-right"></div>
          </div>
          <div class="nameList">
            <vue-seamless-scroll
              :data="fivePrize"
              :class-option="defaultOption"
              class="Box"
            >
              <ul class="ul-scoll">
                <li v-for="(item, index) in fivePrize" :key="index">
                  恭喜 {{ item.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="six-prize">
        <div class="left">
          <div class="text-title">
            <div class="line-left"></div>
            <div class="name">中奖名单</div>
            <div class="line-right"></div>
          </div>
          <div class="nameList">
            <vue-seamless-scroll
              :data="sixPrize"
              :class-option="defaultOption"
              class="Box"
            >
              <ul class="ul-scoll">
                <li v-for="(item, index) in sixPrize" :key="index">
                  恭喜 {{ item.replace(/(\d{3})\d*(\d{2})/, "$1******$2") }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/images/lottery/xiaoxiong.png" class="images" />
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="showWx">
      <img src="../../assets/img/wei_20210307160153.png" />
    </div>
    <div class="banner" v-if="closeUp">
      <img
        src="../../assets/img/share/x.png"
        class="imgone"
        @click="btnCloseUp"
      />
      <img src="../../assets/img/share/yuan.png" class="imgtwo" />
      <span class="spanone">
        打开媛福达APP
        <span class="spantwo">购物方便优惠多</span>
      </span>
      <div class="btn" @click="Gone">下载</div>
      <div id="upBut" class="upDown">打开</div>
      <!-- <div class="upDown" @click="downUp" v-if="!showIos">打开</div> -->
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { getSystem } from "../../js/js";

export default {
  data() {
    return {
      phone: "13463859678",
      twoPrize: [
        "15530660800",
        "15226775758",
        "13653931839",
        "13082736530",
        "13700591022",
      ],
      threePrize: [
        "13403803850",
        "13463779938",
        "13569009837",
        "13582975651",
        "13579887885",
        "13513560306",
        "13653221272",
        "13656880080",
        "15132202360",
        "13483870231",
        "13948765130",
        "13933485296",
        "18730753407",
        "18632628287",
        "13844474779",
      ],
      fourPrize: [
        "15297618376",
        "15373372533",
        "13473407008",
        "15031132339",
        "13832657560",
        "13373354455",
        "13848001321",
        "15028572552",
        "17547619614",
        "15303120636",
        "15035382236",
        "13731686137",
        "13730465082",
        "13931690262",
        "13783938512",
        "13484824224",
        "13473269962",
        "13730152220",
        "13703211341",
        "13503583049",
        "13400339287",
        "13406110810",
        "15776263677",
        "13400275894",
        "13373407769",
        "13514636696",
        "13485367292",
        "13483360380",
        "13603226696",
        "13403629109",
        "13583966173",
        "13585735555",
        "13623128066",
        "13623720566",
        "13623390418",
      ],
      fivePrize: [
        "13409114919",
        "13405498586",
        "13463682432",
        "13403285088",
        "13511569422",
        "13472272166",
        "13485418465",
        "13463695767",
        "13483223392",
        "13633291284",
        "13453715733",
        "13400283413",
        "13662197678",
        "13503299995",
        "13651220030",
        "13582027501",
        "13616388687",
        "13466966973",
        "17732211683",
        "13753559103",
        "15630806858",
        "13731400413",
        "13646492887",
        "13700322353",
        "13730191521",
        "18669362389",
        "18931461572",
        "17839626113",
        "15536426014",
        "15039795590",
        "18653597557",
        "15932624076",
        "15281768190",
        "15133239044",
        "13856148730",
        "15751915232",
        "13120158961",
        "18003356606",
        "15774920812",
        "15561437550",
        "18623362238",
        "13383112470",
        "15037724610",
        "17505342912",
        "15091070435",
        "15919581880",
        "18831826992",
        "13994841028",
        "15613609206",
        "15075804367",
      ],
      sixPrize: [
        "18533337019",
        "13069467785",
        "13235677668",
        "13400308225",
        "13453380619",
        "13400184390",
        "13502043861",
        "13453384568",
        "17561512712",
        "13503314027",
        "13474750833",
        "13401424120",
        "13473279418",
        "13470422388",
        "13403233355",
        "13403287186",
        "13483956430",
        "13467101702",
        "15135865544",
        "13455183630",
        "13467123141",
        "13569620009",
        "13463437487",
        "13478208867",
        "13582133786",
        "13503460974",
        "13513402924",
        "13514178275",
        "13015465418",
        "13403595946",
        "13582219586",
        "13513054052",
        "13519234222",
        "13154792676",
        "13503531534",
        "18331098846",
        "13610660017",
        "13472949525",
        "13519011901",
        "13582283319",
        "13663311136",
        "13573065859",
        "13582164461",
        "13461915591",
        "13666889323",
        "13582878882",
        "13821672806",
        "13583661398",
        "13472220438",
        "13483784164",
        "13684583968",
        "13643587615",
        "13620678407",
        "13700575227",
        "18746135685",
        "13623263918",
        "13643589511",
        "13463838504",
        "13623372433",
        "13703286839",
        "13653562282",
        "13663826071",
        "13473079565",
        "13722280906",
        "13730497681",
        "13610637245",
        "13716984426",
        "13653589844",
        "13722808691",
        "13503545078",
        "13884800183",
        "18348655825",
        "13598147230",
        "15033994674",
        "15932078282",
        "18240731104",
        "13582050601",
        "18732464387",
        "13733386030",
        "13564277963",
        "15188665294",
        "13847459330",
        "15132874407",
        "13835850099",
        "13582042456",
        "15142931191",
        "13383628215",
        "15076016815",
        "13994096129",
        "15075166219",
        "17631769392",
        "18730503271",
        "15176245190",
        "13603229681",
        "15033684312",
        "18713406962",
        "19912332107",
        "18751510474",
        "13673123610",
        "13331543235",
        "13931271154",
        "13931288874",
        "13323246955",
        "13483254852",
        "13231558280",
        "15935654017",
        "17696610494",
        "13994913047",
        "15834360012",
        "18713723363",
        "18713619791",
        "18633611003",
        "18625308535",
        "15130344619",
        "18747614404",
        "15130719825",
        "18335017411",
        "13394151112",
        "13775430505",
        "15512845656",
        "13233553066",
        "13231947818",
        "15061303991",
        "18713159543",
        "13751431900",
        "13833125456",
        "15034333705",
        "15613755345",
        "18931754541",
        "18451175950",
      ],
      closeUp: true,
      system: getSystem(),
      showWx: false,
    };
  },
  components: {
    vueSeamlessScroll,
  },
  mounted() {
    this.toph();
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.system = getSystem();
    // 调用获取次数接口 获取剩余 分享次数 和 游戏次数
    if (!this.system.yfd && !this.system.wechat) {
      if (this.system.iOS9 || this.system.android) {
        ULink([
          {
            id: "usr1anivh5aa8uq6", // 后台生成的裂变活动LinkID
            data: {
              path: "webview",
              webUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/information",
              // webUrl: "http://h.yuanfudagroup.com/h5/#/information", // 活动地址
              andUrl:
                "https://download.yuanfuda933.com/h5/other2.html#/information", // 活动地址
              // extraData: `{id:${this.id},uid:${this.uid}`,
              // extraData: {
              //   id: this.id,
              //   uid: this.uid,
              //   tid: this.tid
              // }
            } /* 自定义参数，选填 */,
            selector: "#upBut",
            useOpenInBrowerTips: "default",
            proxyOpenDownload: function (defaultAction, LinkInstance) {
              window.location.href = LinkInstance.solution.downloadUrl;
            },
          },
        ]);
      }
    } else {
      this.getToken((token) => {
        this.$store.commit("setUser", token);
      });
    }
  },
  methods: {
    // 跳转方法
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    toph() {
      if (this.system.wechat) {
        this.showWx = true;
        return false;
      } else {
        this.showWx = false;
      }
    },
    btnCloseUp() {
      this.closeUp = false;
    },
    Gone() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
      } else if (this.system.android) {
        window.location.href =
          "https://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk";
      }
    },
    downUp() {
      if (this.system.iOS) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return;
      }
    },
  },
};
</script>
<style scoped lang="less">
.dialog-box {
  width: 1.89rem;
  height: 1.95rem;
  position: fixed;
  top: 12.76rem;
  left: 7.95rem;
  z-index: 22;
  .images {
    width: 1.89rem;
    height: 1.95rem;
  }
}
.rigth {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 10rem;
  height: 30rem;
  background-color: #1e1e1e;
  opacity: 0.8;
}
.rigth img {
  width: 8rem;
  height: 4.4rem;
  float: right;
}
.banner {
  position: fixed;
  top: 0%;
  width: 10rem;
  height: 2.28rem;
  background: #000000;
  display: flex;
  z-index: 11;
  .imgone {
    display: block;
    margin: auto 0.293333rem;
    width: 0.586667rem;
    height: 0.586667rem;
  }
  .imgtwo {
    display: block;
    margin: auto 0.266667rem;
    width: 1.28rem;
    height: 1.28rem;
  }
  .spanone {
    margin: auto 0.266667rem;
    width: 3rem;
    height: 1.453333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    .spantwo {
      font-size: 0.32rem;
      font-size: #9b9b9b;
      color: #9b9b9b;
    }
  }
  .btn {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
  }
  .upDown {
    width: 1.55rem;
    height: 0.906667rem;
    background: #ea0462;
    border-radius: 0.133333rem;
    font-size: 0.426667rem;
    color: #ffffff;
    text-align: center;
    line-height: 0.906667rem;
    margin: auto 0;
    margin-left: 0.2rem;
  }
}
.wrap {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  background: #e56f63;
  .header {
    width: 100%;
    height: 14.32rem;
    background: url("../../assets/images/lottery/headerTop.png") no-repeat;
    background-size: 100% 100%;
  }
  .main {
    width: 100%;
    .title-image {
      width: 9.15rem;
      height: 1.27rem;
      margin: 0 auto;
      margin-top: 0.12rem;
      .images {
        width: 9.15rem;
        height: 1.27rem;
      }
    }
    .one-prize {
      width: 10rem;
      height: 8.9rem;
      margin: 0 auto;
      background: url("../../assets/images/lottery/onePrize.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 0.39rem;
      .bannerTops {
        width: 5.37rem;
        height: 4.92rem;
        margin: 0 auto;
        padding-top: 1.45rem;
        .images {
          width: 5.37rem;
          height: 4.92rem;
        }
      }
      .text-title {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .line-left {
          width: 0.7rem;
          height: 0.024rem;
          background: #fd3228;
        }
        .name {
          font-size: 0.49rem;
          color: #fd3228;
          text-align: center;
          padding: 0 0.2rem;
        }
        .line-right {
          width: 0.7rem;
          height: 0.024rem;
          background: #fd3228;
        }
      }
      .phone {
        font-size: 0.8rem;
        width: 100%;
        text-align: center;
        color: #fd3228;
        padding-top: 0.29rem;
      }
    }
    .two-prize,
    .three-prize,
    .four-prize,
    .five-prize,
    .six-prize {
      width: 10rem;
      height: 8.9rem;
      margin: 0 auto;
      background-size: 100% 100%;
      margin-top: 0.85rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .left {
        padding-top: 0.6rem;
        width: 50%;
        .text-title {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .line-left {
            width: 0.7rem;
            height: 0.024rem;
            background: #fd3228;
          }
          .name {
            font-size: 0.49rem;
            color: #fd3228;
            text-align: center;
            padding: 0 0.2rem;
          }
          .line-right {
            width: 0.7rem;
            height: 0.024rem;
            background: #fd3228;
          }
        }
        .nameList {
          padding-top: 0.2rem;
          width: 100%;
          height: 4.39rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          p {
            width: 100%;
            height: 0.3rem;
            font-size: 0.41rem;
            color: #f56a44;
            line-height: 0.2rem;
          }
          .Box {
            width: 100%;
            height: 4.39rem;
            overflow: hidden;
            .ul-scoll {
              li {
                font-size: 0.41rem;
                color: #f56a44;
                padding-top: 0.2rem;
              }
            }
          }
        }
      }
      .right {
        width: 50%;
        .images {
          padding-top: 0.2rem;
          width: 4.8rem;
          height: 5rem;
        }
      }
    }
    .two-prize {
      background: url("../../assets/images/lottery/twoprice.png") no-repeat;
      background-size: 100% 100%;
      .right {
        .images {
          margin-left: -0.45rem;
        }
      }
    }
    .three-prize {
      background: url("../../assets/images/lottery/threePrice.png") no-repeat;
      background-size: 100% 100%;
      .right {
        .images {
          padding-left: 0.45rem;
        }
      }
    }
    .four-prize {
      background: url("../../assets/images/lottery/fourprice.png") no-repeat;
      background-size: 100% 100%;
      .right {
        .images {
          margin-left: -0.45rem;
        }
      }
    }
    .five-prize {
      background: url("../../assets/images/lottery/wudeng.png") no-repeat;
      background-size: 100% 100%;
      .right {
        .images {
          padding-left: 0.45rem;
        }
      }
    }
    .six-prize {
      background: url("../../assets/images/lottery/sixprize.png") no-repeat;
      background-size: 100% 100%;
      .right {
        .images {
          margin-left: -0.45rem;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 1rem;
  }
}
</style>